<template>
  <div id="login">
    <div id="bgd">
      <canvas id='myCanvas' :width='width' :height='height'>
      </canvas>
    </div>
    <div id="loginBox">
      <div class="g_pic" align="center">
        <img src="../assets/登录.png" />
      </div>
      <el-form ref="UserFormRef" :model="UserForm" :rules="UserRules" class="user_form" label-width="0px">
        <el-form-item prop="name" class="inps">
          <el-input v-model="UserForm.name" prefix-icon="iconfont icon-yonghu"></el-input>
          <span id="nameInfo"></span>
        </el-form-item>
        <el-form-item prop="password" class="inps">
          <el-input type="password" v-model.number="UserForm.password" prefix-icon="iconfont icon-mima"></el-input>
          <span id="numberInfo"></span>
        </el-form-item>

        <el-form-item class="btns" align="center">
          <el-button type="primary" class="submitBtn" @click="User()">登录</el-button>
          <el-button type="info" class="submitBtn" @click="resetForm()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        canvas: null,
        context: null,
        stars: [], //星星数组
        shadowColorList: [
          "#00ffa6",
          "#ec5707",
          "#f3f3f3",
          "#22e6c7",
          "#9bf306",
          "#0800ff",
          "#bb546a"
        ], //阴影颜色列表
        directionList: ["leftTop", "leftBottom", "rightTop", "rightBottom"], //星星运行方向
        speed: 12, //星星运行速度
        last_star_created_time: new Date(), //上次重绘星星时间
        Ball: class Ball {
          constructor(radius) {
            this.x = 0;
            this.y = 0;
            this.radius = radius;
            this.color = "";
            this.shadowColor = "";
            this.direction = "";
          }

          draw(context) {
            context.save();
            context.translate(this.x, this.y);
            context.lineWidth = this.lineWidth;
            var my_gradient = context.createLinearGradient(0, 0, 0, 8);
            my_gradient.addColorStop(0, this.color);
            my_gradient.addColorStop(1, this.shadowColor);
            context.fillStyle = my_gradient;
            context.beginPath();
            context.arc(0, 0, this.radius, 0, Math.PI * 2, true);
            context.closePath();

            context.shadowColor = this.shadowColor;
            context.shadowOffsetX = 0;
            context.shadowOffsetY = 0;
            context.shadowBlur = 10;

            context.fill();
            context.restore();
          }
        }, //工厂模式定义Ball类
        width: window.innerWidth,
        height: window.innerHeight,
        UserForm: {
          /*name: "用户名",
          number: "密码",*/
          name: "admin",
          password: "123456",
        },
        UserRules: {
          name: [{
            required: true,
            message: '用户名为必填项',
            trigger: 'blur'
          },
            {
              min: 2,
              max: 8,
              message: '长度在 2 到 8 个字符',
              trigger: 'blur'
            }
          ],
          password: [{
            required: true,
            message: '密码为必填项',
            trigger: 'blur'
          }, ],
        }
      };
    },
    methods: {
      resetForm() {
        this.$refs.UserFormRef.resetFields()
      },
      User() {
        this.$refs.UserFormRef.validate(async valid => {
          console.log(this.UserForm);
          console.log(this.UserForm.name);
          if (this.UserForm.name == "admin" && this.UserForm.password == "123456") {
            window.sessionStorage.setItem('username', this.UserForm.name);
            window.sessionStorage.setItem('password', this.UserForm.password);
            this.$message.success("操作成功！！！")
            await this.$router.push({
              path: "/home"
            });
          } else {
            this.$message.error("操作失败！！！")
          }
        })
      },


      //提交登录
      submitForm() {},
      //重复动画
      drawFrame() {
        let animation = requestAnimationFrame(this.drawFrame);
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
        this.createStar(false);
        this.stars.forEach(this.moveStar);
      },
      //展示所有的星星
      createStar(params) {
        let now = new Date();
        if (params) {
          //初始化星星
          for (var i = 0; i < 50; i++) {
            const radius = Math.random() * 3 + 2;
            let star = new this.Ball(radius);
            star.x = Math.random() * this.canvas.width + 1;
            star.y = Math.random() * this.canvas.height + 1;
            star.color = "#ffffff";
            star.shadowColor = this.shadowColorList[
              Math.floor(Math.random() * this.shadowColorList.length)
              ];
            star.direction = this.directionList[
              Math.floor(Math.random() * this.directionList.length)
              ];
            this.stars.push(star);
          }
        } else if (!params && now - this.last_star_created_time > 1000) {
          //每隔3秒重绘修改颜色其中30个球阴影颜色
          for (var i = 0; i < 30; i++) {
            this.stars[i].shadowColor = this.shadowColorList[
              Math.floor(Math.random() * this.shadowColorList.length)
              ];
          }
          this.last_star_created_time = now;
        }
      },
      //移动
      moveStar(star, index) {
        if (star.y - this.canvas.height > 0) {
          //触底
          if (Math.floor(Math.random() * 2) === 1) {
            star.direction = "leftTop";
          } else {
            star.direction = "rightTop";
          }
        } else if (star.y < 2) {
          //触顶
          if (Math.floor(Math.random() * 2) === 1) {
            star.direction = "rightBottom";
          } else {
            star.direction = "leftBottom";
          }
        } else if (star.x < 2) {
          //左边
          if (Math.floor(Math.random() * 2) === 1) {
            star.direction = "rightTop";
          } else {
            star.direction = "rightBottom";
          }
        } else if (star.x - this.canvas.width > 0) {
          //右边
          if (Math.floor(Math.random() * 2) === 1) {
            star.direction = "leftBottom";
          } else {
            star.direction = "leftTop";
          }
        }
        if (star.direction === "leftTop") {
          star.y -= star.radius / this.speed;
          star.x -= star.radius / this.speed;
        } else if (star.direction === "rightBottom") {
          star.y += star.radius / this.speed;
          star.x += star.radius / this.speed;
        } else if (star.direction === "leftBottom") {
          star.y += star.radius / this.speed;
          star.x -= star.radius / this.speed;
        } else if (star.direction === "rightTop") {
          star.y -= star.radius / this.speed;
          star.x += star.radius / this.speed;
        }
        star.draw(this.context);
      }
    },
    mounted() {
      this.canvas = document.getElementById("myCanvas");
      this.context = this.canvas.getContext("2d");

      this.createStar(true);
      this.drawFrame();
    }
  };
</script>

<style lang='less' scoped>
  #login {
    width: 100vw;
    padding: 0;
    margin: 0;
    height: 100vh;
    font-size: 16px;
    background-repeat: no-repeat;
    background-position: left top;
    background-color: #242645;
    color: #fff;
    font-family: "Source Sans Pro";
    background-size: 100%;
    background-image: url(../assets/背景.png);
    position: relative;

    #bgd {
      height: 100vh;
      width: 100vw;
      overflow: hidden;
    }

    #loginBox {
      width: 400px;
      height: 280px;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      padding: 50px 40px 40px 40px;
      box-shadow: -15px 15px 15px rgba(6, 17, 47, 0.7);
      opacity: 1;
      background: linear-gradient(230deg,
      rgba(53, 57, 74, 0) 0%,
      rgb(0, 0, 0) 100%);
      /deep/ .inps input {
        border: none;
        color: #fff;
        background-color: transparent;
        font-size: 18px;
      }
      .submitBtn {
        background-color: transparent;
        color: #39f;
        width: 100px;
      }
      .iconfont {
        color: #fff;
      }
    }
  }
  .user_form {
    padding: 0 20px;
  }
</style>
